<template>
  <div>
    <el-dialog
      title="存储模式配置"
      :visible.sync="dialogVisible"
      width="500px"
      center
      @close="handleCancel"
      append-to-body
    >
      <el-form
        ref="configForm"
        :model="config"
        label-width="120px"
        v-loading="loading"
      >
        <el-form-item label="当前上传方式">
          <el-tag :type="config.uploadType === 'minio' ? 'success' : 'info'">
            {{ config.uploadType === 'minio' ? 'MinIO' : '本地上传' }}
          </el-tag>
        </el-form-item>

        <el-form-item label="选择上传方式">
          <el-radio-group v-model="config.uploadType">
            <el-radio label="local">本地上传</el-radio>
            <el-radio label="minio">MinIO</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="说明">
          <el-alert
            v-if="config.uploadType === 'local'"
            title="本地上传：文件将保存在服务器本地磁盘"
            type="info"
            :closable="false"
          />
          <el-alert
            v-if="config.uploadType === 'minio'"
            title="MinIO：文件将保存在MinIO对象存储服务"
            type="success"
            :closable="false"
          />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="saveConfig" :loading="loading">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getStorageMode, setStorageMode } from '@/api/system/dept/dept'

export default {
  name: 'UploadConfig',
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  data() {
    return {
      dialogVisible: false,
      config: {
        uploadType: 'local'
      },
      loading: false
    }
  },
  methods: {
    open() {
      this.dialogVisible = true
      this.loadConfig()
    },
    async loadConfig() {
      try {
        this.loading = true
        const response = await getStorageMode()
        if (response.code === 200) {
          this.config.uploadType = response.data || 'local'
        } else {
          this.$message.error('获取存储模式配置失败')
        }
      } catch (error) {
        console.error('获取存储模式配置失败:', error)
        this.$message.error('获取存储模式配置失败')
        this.config.uploadType = 'local'
      } finally {
        this.loading = false
      }
    },
    async saveConfig() {
      try {
        this.loading = true
        const response = await setStorageMode(this.config.uploadType)
        if (response.code === 200) {
          this.$message.success('存储模式配置保存成功！')
          this.handleCancel()
          
          // 触发事件通知父组件配置已更新
          this.$emit('config-updated', this.config)
        } else {
          this.$message.error('保存配置失败')
        }
      } catch (error) {
        console.error('保存配置失败:', error)
        this.$message.error('保存配置失败')
      } finally {
        this.loading = false
      }
    },
    handleCancel() {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>
